<template>
	<view class="s_drawer" v-if="showDrawer">
		<view class="mask" :style="[isMask]" ref="maskRef" @click="clickMask"></view>
		<view class="drawer" :style="[pos,hDrawer]" ref="cRef">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		nextTick,
		ref,
		watchEffect
	} from 'vue';
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		isMask: {
			type: Boolean,
			default: true
		},
		animation: {
			type: Boolean,
			default: true
		},
		pl: {
			type: Number,
			default: 0
		},
		pr: {
			type: Number,
			default: 0
		},
		pt: {
			type: Number,
			default: 0
		},
		pb: {
			type: Number,
			default: 0
		}
	})
	// #ifdef APP-NVUE
	const animation = weex.requireModule('animation')
	// #endif

	const showDrawer = ref(false) // 通过计算后是否显示该组件
	const maskRef = ref(null) // 弹层的实例
	const cRef = ref(null) // 类容的实例
	const hDrawer = ref('') // 类容显示的时候添加的属性方便做隐藏的动画

	const emit = defineEmits(['clickMask'])

	const isMask = computed(() => { // 是否显示遮罩
		let mask = `${props.isMask?'background-color: rgba(0, 0, 0, .1);':''}`
		return mask
	})

	const pos = computed(() => { // 类容出现的位置
		let pos = ''
		if (props.pl && props.pt) {
			pos = pos + `left:${props.pl}rpx;top:${props.pt}rpx;`
			return `${pos}`
		} else {
			pos = pos + `right:${props.pr}rpx;top:${props.pt}rpx;`
			return `${pos}`
		}
	})


	// #ifdef APP-NVUE
	watchEffect(() => {
		if(props.show){
			showDrawer.value = true
		}
		if (props.show && props.animation) { // 弹层的动画
			animation.transition(maskRef.value, {
				styles: {
					opacity: 1,
				},
				duration: 200, 
				timingFunction: 'ease'
			})
		}
		if (props.show && props.animation) { // 类容的动画
			animation.transition(cRef.value, {
				styles: {
					opacity: 1,
					transform: 'scale(1,1)',
					transformOrigin: 'right left',
				},
				duration: 200, 
				timingFunction: 'ease'
			}, () => {
				hDrawer.value = `opacity: 1;transform: scale(1,1);`
			})
		}
		if (!props.show && props.animation) {
			animation.transition(cRef.value, {
				styles: {
					opacity: 0,
					transform: 'scale(0,0)',
					transformOrigin: 'right left',
				},
				duration: 200, 
				timingFunction: 'ease'
			}, () => {
				showDrawer.value = false
				hDrawer.value = ''
			})
		}
	})
	// #endif

	const clickMask = () => { // 点击了弹层
		emit('clickMask')
	}
</script>

<style lang="less" scoped>
	.s_drawer {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.mask {
			opacity: 0;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.drawer {
			opacity: 0;
			transform: scale(0, 0);
			padding: 20rpx;
			position: absolute;
		}
	}
</style>